<template>
  <div>
          <el-card class="box-card" shadow="always">
            <span><b>字典详情</b></span>
            <el-button
              style="float: right;"
              type="primary"
              size="mini"
              icon="el-icon-circle-plus"
              v-show="tableIsShow"
              @click="addDetail()"
              >新增</el-button>
            <el-divider></el-divider>
            <div class="hint" v-show="hintIsShow">
              <b>点击左侧字典查看详细</b>
            </div>
            <el-table
              :data="list2"
              style="width: 100%"
              stripe
              border
              ref="multipleTable"
              tooltip-effect="dark"
              v-show="tableIsShow"
            >
              <el-table-column label="所属字典" align="center">{{
                dictName
              }}</el-table-column>
              <el-table-column prop="label" label="字典标签" align="center">
              </el-table-column>
              <el-table-column prop="value" label="字典值" align="center">
              </el-table-column>
              <el-table-column prop="dictSort" label="排序" align="center">
              </el-table-column>
              <el-table-column label="操作" align="center" width="200">
                <template slot-scope="scope">
                  <el-button
                    type="primary"
                    icon="el-icon-edit"
                    title="编辑"
                    circle
                    @click.native.prevent="redactRow(scope.row)"
                  ></el-button>
                  <el-button
                    type="danger"
                    icon="el-icon-delete"
                    title="删除"
                    circle
                    @click.native.prevent="detailDelete(scope.row)"
                  ></el-button>
                </template>
              </el-table-column>
            </el-table>


              <!-- ======================子表格 弹框编辑=============== -->
              <el-dialog
                :visible.sync="AddVisible"
                :title="uptitle"
                width="30%"
                :center="false"
                customClass="dialogClass"
                :showClose="false"
              >
                <el-row :gutter="70">
                  <el-col :span="11" :offset="1">
                    <span><b>字典名称：</b></span
                    ><span>{{ dictName }}</span>
                  </el-col>
                  <el-col :span="10">
                    <span><b>字典描述：</b></span
                    ><span>{{ dictDescription }}</span>
                  </el-col>
                </el-row>
                <el-divider></el-divider>
                <el-form
                  label-width="100px"
                  :model="detail"
                  :rules="dictRules"
                  ref="form"
                >
                  <el-row :gutter="30">
                    <el-col :span="12">
                      <el-form-item label="字典标签：" prop="label">
                        <el-input
                          size="small"
                          v-model="detail.label"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="字典值：" prop="value">
                        <el-input
                          size="small"
                          v-model="detail.value"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
                <span slot="footer">
                  <el-button
                    round
                    type="info"
                    icon="el-icon-circle-close"
                    @click="upCancel()"
                    >取 消</el-button
                  >
                  <el-button
                    round
                    type="primary"
                    icon="el-icon-circle-check"
                    @click="submit('form')"
                    >提 交</el-button
                  >
                </span>
              </el-dialog>
            <!-- ==================子表格 分页================== -->
              <el-col :span="18" v-show="tableIsShow">
                <el-pagination
                  background
                  @size-change="handleSizeChanges"
                  @current-change="handleCurrentChanges"
                  layout="total, sizes,prev, pager, next,jumper"
                  :page-size="listQuery2.pageSize"
                  :page-sizes="[6, 8]"
                  :pager-count="5"
                  :current-page.sync="listQuery2.pageNum"
                  :total="totals"
                ></el-pagination>
              </el-col>
            </el-row>
          </el-card>
    </div>
</template>

<script>
import {
  getAllId,
  deleteDetail,
  addDict,
  updateDetail
} from "@/api/dict";

export default {
  props: ["hintIsShow","tableIsShow"],

  watch: {
        vSHow(newVal) {
            this.hintIsShow = newVal //对父组件传过来的值进行监听，如果改变也对子组件内部的值进行改变
            this.tableIsShow=newVal
        }
    },
  data() {
    return {
      hintIsShow:this.hintIsShow,
      tableIsShow:this.tableIsShow,


      fullscreenLoading: false,
      dictId: null,
      dictName: "",
      dictDescription: "",
      uptitle: "新增字典详情",

      checkedName: true,
      checkedDescribe: true,
      checkedHandle: true,
      multiAddVisible: false,
      AddVisible: false,
      isShow: true,
      isShowName: true,
      isShowDescribe: true,
      hintIsShow: true,
      tableIsShow: true,

      detail: {
        detailId: null,
        dictId: null,
        label: null,
        value: null
      },

      form: {
        name: ""
      },
      listQuery2: {
        dictId: 1,
        pageNum: 1,
        pageSize: 6
      },
      delArrParam: {
        ids: null
      },
      total: null,
      totals: null,
      list: null,
      list2: null,
      rows: null,
      allid: "",
      sonid: "",
      // 验证规则
      dictRules: {
        label: [{ required: true, trigger: "blur", message: "请输入标签" }],
        value: [{ required: true, trigger: "blur", message: "请输入值" }]
      }
    };
  },
  created() {
    this.getDictDetail();
  },

  methods: {
    initDetial(v_dictId,v_name,v_dictDescription){
      this.listQuery2.dictId = v_dictId
      this.dictName = v_name
      this.dictDescription = v_dictDescription
      this.getDictDetail();
    },
    //显示子表格详细   及 子表格分页
    getDictDetail() {
      getAllId(this.listQuery2).then(response => {
        this.list2 = response.data.records;
        this.totals = response.data.total;
        this.totalPage = response.data.pages;
        this.pageSize = response.data.size;
      });
    },

    handleSizeChanges(val) {
      this.listQuery2.pageNum = 1;
      this.listQuery2.pageSize = val;
      this.getDictDetail();
    },
    handleCurrentChanges(val) {
      this.listQuery2.pageNum = val;
      this.getDictDetail();
    },


    //+++++++++++++++++++++++++++++++++子表格 功能----------------------
    //子表新增
    addDetail() {
      this.AddVisible = true;
      this.uptitle = "新增字典详情";
      this.detail.label = null;
      this.detail.value = null;
      this.detail.detailId = null;
      this.detail.dictId = this.dictId;
      this.getDictDetail();
    },

    //子表弹框取消
    upCancel() {
      this.AddVisible = false;
      this.getDictDetail();
    },

    //子表编辑修改
    redactRow(row) {
      this.AddVisible = true; //显示弹框
      this.uptitle = "修改字典详情";
      this.detail = row; //row当前行数据，把当前行的数据赋值给 表单
      this.sonid = row.id; //把id存全局
    },

    //字表单删除
    detailDelete(row) {
      this.$confirm("是否要删除", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        deleteDetail(row.detailId).then(response => {
          if (response.code == 200) {
            this.$message({
              message: "删除数据成功",
              type: "warning"
            });
            this.getDictDetail();
          } else {
            this.$message({
              showClose: true,
              message: "警告哦，这条数据删除失败！",
              type: "warning"
            });
          }
        });
      });
    },

    //-----子表格提交修改++++++++
    submit(formName) {
      console.log(this.detail);
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (!this.sonid) {
            //添加
            console.log(this.sonid);
            addDict(this.detail).then(response => {
              if (response.code == 200) {
                this.$message({
                  message: "提交成功",
                  type: "success",
                  duration: 1000
                });
                this.getDictDetail();
                this.AddVisible = false;
                this.$refs.form.resetFields(); //清空表格数据
              } else {
                this.$message({
                  message: response.msg,
                  type: "error",
                  duration: 1000
                });
              }
            });
          } else {
            // 修改
            let id = this.sonid;
            let params = {
              label: this.detail.label,
              value: this.detail.value
            };
            updateDetail(id, params).then(response => {
              if (response.code == 200) {
                this.$message({
                  message: "提交成功",
                  type: "success",
                  duration: 1000
                });
                this.getDictDetail();
                this.AddVisible = false;
                this.$refs.form.resetFields(); //清空表单数据
              } else {
                this.$message({
                  message: response.msg,
                  type: "error",
                  duration: 1000
                });
              }
            });
          }
        } else {
          this.$message.error("表单信息不能为空");
          this.AddVisible = true;
        }
      });
    }
  }
};
</script>

<style>

.box-card {
  width: 100%;
}

.second {
  margin-bottom: 3%;
}

.but {
  text-align: right;
}
.dialogClass {
  border-radius: 20px;
}

.hint {
  border: 1px solid whitesmoke;
  padding-left: 20px;
  line-height: 100px;
  border-radius: 4px;
  height: 100px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
</style>
